<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="翻页时长" v-if="isNone">
        <el-input
          placeholder="请输入时长"
          v-model="pageTime"
          style="width: 100px; height: 35px"
          @keyup.enter.native="clearTimeout(this.timer), getsafeList"
        >
          <template slot="append">秒</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="stopbtn">{{
          openbtn
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableList"
      :header-cell-style="thaderBack"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="psPersonName" label="人员姓名"> </el-table-column>
      <el-table-column
        prop="psPersonDuty"
        label="工种/职务"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="psPersonDept"
        label="区队班组/部门"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="psStationName"
        label="分站名称"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="psAreaName" label="区域名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="psMineEntertime"
        label="入井时间"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- <el-table-column
        prop="csDataTime"
        label="时间"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="pageShow"
      :total="total1"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { listInfo, getInfo, addInfo } from '@/api/personnel/personrealtime'
export default {
  data() {
    return {
      activeName: 'first',
      tableList: [],
      list: [],
      coalmineList: [],
      pageNum: 1,
      pageSize: 15,
      total1: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        csMineCode: ''
      },
      timer: '',
      pageTime: 5,
      isStop: true,
      isDisplay: 'none',
      isNone: true,
      openbtn: '暂停',
      count: 0,
      DeptList: [],
      DutyList: [],
      total: 0,
      loading: false,
      pageShow: false
    }
  },
  watch: {
    'queryParams.pageNum'(val) {
      if (val <= this.total1) {
        if (this.isStop == true) {
          this.getList()
        } else {
          this.getLists()
        }
      }
    }
  },
  mounted() {
    this.getDept()
    this.getDuty()
    this.getList(this.queryParams)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  destroyed() {
    this.timer = null
    clearInterval(this.timer)
  },
  methods: {
    cellStyleFun() {
      return 'text-align:center'
    },
    thaderBack() {
      return {
        // background: '#0069eb',
        // color: '#fff',
        // textAlign: 'center',
        fontSize: '0.14rem'
      }
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'evencolor'
      } else {
        return 'oddcolor'
      }
    },
    // 获取部门
    getDept() {
      listInfo().then(res => {
        this.DeptList = res.data
      })
    },
    // 获取工种
    getDuty() {
      getInfo().then(res => {
        this.DutyList = res.data
      })
    },
    resetlist(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields()
      }
    },
    changes() {
      this.queryParams.pageNum = '1'
      clearTimeout(this.timer)
      this.isDisplay = 'block'
      this.isNone = false
      this.openbtn = '开启'
      this.isStop = false
      this.getLists()
    },
    stopbtn() {
      clearTimeout(this.timer)
      this.isDisplay = this.isDisplay == 'block' ? 'none' : 'block'
      this.isNone = !this.isNone
      this.openbtn = this.openbtn == '暂停' ? '开启' : '暂停'
      this.isStop = false
      if (this.openbtn == '暂停') {
        this.isStop = true
        this.getList()
        this.pageShow = false
      } else {
        this.pageShow = true
      }
    },
    getLists() {
      addInfo(this.queryParams).then(res => {
        this.tableList = res.rows
        this.total1 = res.total
      })
    },
    getList() {
      addInfo(this.queryParams).then(res => {
        this.tableList = res.rows
        this.total1 = res.total
        clearTimeout(this.timer)
        this.timer = () => {
          if (
            this.queryParams.pageNum <
            Math.ceil(this.total1 / this.queryParams.pageSize)
          ) {
            this.count = Number(this.count) + 1
            this.queryParams.pageNum = Number(this.queryParams.pageNum) + 1
            this.tableList = res.rows
          } else {
            this.count = 0
            this.queryParams.pageNum = 1
            this.tableList = res.rows
          }
        }
        setTimeout(this.timer, this.pageTime * 1000)
      })
    }
  },
  created() {
    // this.$store.commit('getMineCode')
    // const MineCode = this.$store.state.user.MineCode
    // if (MineCode != 'null') {
    //   this.queryParams.csMineCode = MineCode
    // } else {
    //   this.queryParams.csMineCode = ''
    // }
  }
}
</script>
<style  lang="scss" scoped>
.pager {
  display: none;
}
</style>